<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2>{{title}}</h2>
        <p><input type="text" v-focus v-model="msg"></p>
        <h2 v-red v-hello>{{msg}}</h2>
        <div v-my-demo:click.stop.once="msg" v-my-color="color">Demo-Demo</div>
        <div v-my-html="html" v-my-show="show"></div>
        <button @click="show=!show">点击切换show</button>
        <button v-my-on:click.stop="change">count=={{count}}</button>

    </div>



    <script>


        //全局指令
        Vue.directive('focus', {
            //钩子函数
            inserted(el) {  //el 当前指令操作的DOM
                el.focus()
            }
        })

        Vue.directive('hello', {
            //绑定到dom执行
            bind(el) {
                el.innerHTML += 'hello-hello-hello';
            }
        })

        Vue.directive('MyDemo', {
            //指令所绑定的元素，可以用来直接操作 DOM.
            //binding 指令携带的数据信息

            // bind   指令第一次绑定到 元素时候调用     进行一些初始化操作   1
            bind(el, binding) {
                console.log('bind');
            },
            //inserted  插入   被绑定元素插入父节点时调用  1
            inserted(el, binding) {
                console.log('inserted');
                console.log(binding);
                var s = JSON.stringify;
                // name 指令名
                // value 指令的值  最重要  binding.value (函数)
                // expression  指令对应的表达式 变量名称
                // argument   指令的参数     v-on:click  click args   冒号声明的  
                // modifiers   指令的修饰符   v-on.stop:click  stop 修饰符   
                // (v-show v-on  v-html)
                el.innerHTML =
                    'name: ' + s(binding.name) + '<br>' +
                    'value: ' + s(binding.value) + '<br>' +
                    'expression: ' + s(binding.expression) + '<br>' +
                    'argument: ' + s(binding.arg) + '<br>' +
                    'modifiers: ' + s(binding.modifiers) + '<br>'

            },
            //update    更新  数据或者DOM节点 更新    n
            updated(el, binding) {
                console.log('updated');
            },
            //unbind   只调用一次，指令与元素解绑时调用   1
            upbind(el, binding) {
                console.log('upbind');
            },
        })
        Vue.directive('myColor', {
            bind(el, binding) {
                console.log(binding);
                el.style.color = binding.value;
            }
        })
        Vue.directive('myHtml', {
            // bind(el){

            // },
            inserted(el, binding) {
                el.innerHTML = binding.value;
            }
        })

        Vue.directive('myShow', {
            inserted(el, binding) {
                console.log(binding.value);
                el.style.display = binding.value ? 'block' : 'none';
            },
            update(el, binding) {
                // console.log("updated")
                console.log(binding.value);
                el.style.display = binding.value ? 'block' : 'none'
            }
        })

        Vue.directive("myIf", {
            inserted(el, binding) {
                if (!binding.value) {
                    el.remove()
                }
            },
            update(el, binding) {
                if (!binding.value) {
                    el.remove()
                } else {
                    // 百度
                }
            }
        })
        Vue.directive('myOn', {
            bind(el, binding) {
                console.log(binding);
                const { arg, value, modifiers } = binding;
                el.addEventListener(arg, value, modifiers.stop)
            }
        })


        const vm = new Vue({
            data: {
                title: 'Vue 指令 & 自定义指令 ',
                msg: '阿达拉快递',
                color: 'deeppink',
                html: '<h1>就这呀</h1>',
                show: true,
                count: 10000

            },
            methods: {
                change() {
                    this.count++
                }
            },
            //局部自定义指令
            directives: {
                red: {
                    inserted(el) {
                        el.style.color = 'red'
                    }
                }
            }
        }).$mount('#app')
    </script>
     <!-- 
            Vue 也允许注册自定义指令   操作底层DOM  
            代码复用和抽象的主要形式是组件 (component 讲到这里再说) 

            v-on   v-if   v-show    v-for   v-model v-bind v-else v-once v-text v-html  
            指令目的   作用    操作底层DOM  

            指令 directive  
            v- 开头     驼峰命名 (单词之间  大写字母  变为小写字母 前面加 -  )  newColor   (W3C HTML 不准出现大写字母 )   

            全局定义  Vue.directive(name,{钩子函数})   Vue.filter
            局部定义  directives      filters 

            指令钩子函数   一个指令定义对象可以提供钩子函数 (操作指令的钩子函数 )
            bind   指令第一次绑定到 元素时候调用     进行一些初始化操作   1 
            inserted  插入   被绑定元素插入父节点时调用  1
            update    更新  数据或者DOM节点 更新    n 
            unbind   只调用一次，指令与元素解绑时调用   1

            钩子函数 有几个参数 (el binding )
            el 绑定的DOM
            binding  指令携带的变量数据

            name 指令名
            value 指令的值  最重要  binding.value (函数)
            expression  指令对应的表达式 变量名称
            argument   指令的参数     v-on:click  click args   冒号声明的  
            modifiers   指令的修饰符   v-on.stop:click  stop 修饰符   
            (v-show v-on  v-html)

            
            v-slot   分发
            v-pre    
            v-cloak  锁住DOM 
     -->

</body>

</html>